<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <el-button type="success" round size="large" @click="addVisible = true">新增</el-button>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="departmentId" label="ID" />
            <el-table-column prop="departmentName" label="业务名称" />
            <el-table-column prop="admin.realName" label="负责人">
                <template #default="scope">
                    <div v-if="scope.row.admin != null">
                        <el-popover placement="top-start" :width="500" title="负责人信息" trigger="hover">
                            <el-descriptions class="margin-top" :column="3" :size="size" border>
                                <el-descriptions-item label="头像">
                                    <el-avatar shape="square" size="large"
                                        :src="'http://localhost:8080/images/' + scope.row.admin.userAvatar" />
                                </el-descriptions-item>
                                <el-descriptions-item label="姓名">{{ scope.row.admin.realName }}</el-descriptions-item>
                                <el-descriptions-item label="手机号">{{ scope.row.admin.userPhone }}</el-descriptions-item>
                                <el-descriptions-item label="性别">{{ scope.row.admin.gender }}</el-descriptions-item>
                                <el-descriptions-item label="邮箱">{{ scope.row.admin.userEmail }}</el-descriptions-item>
                            </el-descriptions>

                            <template #reference>
                                <el-button>{{ scope.row.admin.realName }}</el-button>
                            </template>
                        </el-popover>
                        <el-button type="danger" @click="showChange(scope.row.departmentId, scope.row.admin.userId)"
                            round>更换负责人</el-button>
                    </div>
                    <el-button v-else type="primary" @click="showAddAdmin(scope.row.departmentId)"
                        round>选择负责人</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="showUpdate(scope.row.departmentId)">编辑</el-button>
                    <el-popconfirm title="你确定要删除该业务吗？" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="delInfo(scope.row.departmentId)">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <!-- 更换负责人 -->
    <el-dialog v-model="changeVisible" title="新负责人" width="500">
        <el-form :model="changeForm" :rules="changeRules" ref="changeFormRef">
            <el-form-item label="员工选择" prop="userId">
                <el-select v-model="changeForm.userId" placeholder="请选择需要任命的负责人">
                    <el-option v-for="item in empList" :key="item.userId" :label="item.realName" :value="item.userId" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="changeVisible = false">取消</el-button>
                <el-button type="primary" @click="subChange">确认</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 新增弹出框 -->
    <el-dialog v-model="addVisible" title="新增业务信息" width="500">
        <el-form :model="addInfoForm" :rules="addRules" ref="addFormRef">
            <el-form-item label="业务名称" label-width="20%" prop="departmentName">
                <el-input v-model="addInfoForm.departmentName" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addVisible = false">取消</el-button>
                <el-button type="primary" @click="subAdd">确认</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 修改弹出层 -->
    <el-dialog v-model="updateVisible" title="修改业务信息" width="500">
        <el-form :model="updateInfoForm" :rules="updateRules" ref="updateFormRef">
            <el-form-item label="业务名称" label-width="20%" prop="departmentName">
                <el-input v-model="updateInfoForm.departmentName" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateVisible = false">取消</el-button>
                <el-button type="primary" @click="subUpdate">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import departmentApi from '@/api/departmentApi';
import { ref } from "vue";
import { ElMessage } from 'element-plus'
import userApi from '@/api/userApi';

// 表格数据
const tableData = ref([]);
// 新增弹出层状态
const addVisible = ref(false);
// 修改弹出层状态
const updateVisible = ref(false);
// 新增部门信息
const addInfoForm = ref({
    departmentName: ''
});
// 修改部门信息
const updateInfoForm = ref({
    departmentId: '',
    departmentName: ''
});

// 修改负责人控制
const changeVisible = ref(false);
// 负责人信息
const changeForm = ref({
    oldId: '',
    userId: null
});
// 员工列表
const empList = ref([])

// 验证规则
const addRules = {
    departmentName: [
        { required: true, message: '请输入业务名称', trigger: 'blur' }
    ]
};

const updateRules = {
    departmentName: [
        { required: true, message: '请输入业务名称', trigger: 'blur' }
    ]
};

const changeRules = {
    userId: [
        { required: true, message: '请选择新负责人', trigger: 'change' }
    ]
};

// 打开修改负责人模态框
const showChange = (did, uid) => {
    changeForm.value = {
        oldId: '',
        userId: ''
    }
    empList.value = [];
    userApi.getEmpList(did)
        .then(resp => {
            changeForm.value.oldId = uid;
            empList.value = resp.data;
            changeVisible.value = true;
        })
}

const changeFormRef = ref(null)
// 提交修改负责人
const subChange = () => {
    changeFormRef.value.validate((valid) => {
        if (valid) {
            userApi.updateAdmin(changeForm.value.oldId, changeForm.value.userId)
                .then(resp => {
                    if (resp.code === 10000) {
                        ElMessage.success(resp.msg);
                        getTableData();
                        changeVisible.value = false;
                    } else {
                        ElMessage.error(resp.msg);
                    }
                });
        } else {
            ElMessage.error("请选择新的负责人");
        }
    });
}

const addFormRef = ref(null)
// 提交新增部门信息
const subAdd = () => {
    addFormRef.value.validate((valid) => {
        if (valid) {
            departmentApi.addInfo(addInfoForm.value)
                .then(resp => {
                    if (resp.code === 10000) {
                        addVisible.value = false;
                        addInfoForm.value = { departmentName: '' };
                        getTableData();
                        ElMessage.success(resp.msg);
                    } else {
                        ElMessage.error(resp.msg);
                    }
                });
        }
    });
};


// 打开弹出层获取编辑前信息
const showUpdate = (did) => {
    departmentApi.getById(did)
        .then(resp => {
            if (resp.code === 10000) {
                updateInfoForm.value = resp.data;
                // 显示弹出层
                updateVisible.value = true;
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                });
            }
        });
}

const updateFormRef = ref(null)
// 提交修改信息
const subUpdate = () => {
    updateFormRef.value.validate((valid) => {
        if (valid) {
            departmentApi.updateInfo(updateInfoForm.value)
                .then(resp => {
                    if (resp.code === 10000) {
                        updateVisible.value = false;
                        getTableData();
                        ElMessage.success(resp.msg);
                    } else {
                        ElMessage.error(resp.msg);
                    }
                });
        }
    });
};

// 获取表格数据
const getTableData = () => {
    departmentApi.getAll().then(
        resp => {
            if (resp.code === 10000) {
                tableData.value = resp.data;
            }
        }
    );
}

getTableData();
</script>

<style scoped>
.dialog-footer {
    text-align: right;
}
</style>
